// 学习版
// 容器组件, 连接ui和redux的桥梁

import {
    ADD,
    MINUS
} from '../../redux/constant'

// 引入ui组件, 更名
// import CountUI from "../../components/Count"

// 引用redux中的store
// import store from "../../redux/store"

import React, { Component } from 'react'
// 引入store, 用于获取状态
import store from '../../redux/store'
// 引入actionCreator, 用于创建action对象
import {
    add,
    minus,
    addAsync
} from '../../redux/actions/count'

// 引入connect用于连接ui组件与redux
import { connect } from 'react-redux'

// ui组件和容器组件整合在一个文件中
class Count extends Component {

    add = () => {
        const { value } = this.selectNum
        this.props.add(value * 1);
    }

    minus = () => {
        const { value } = this.selectNum
        this.props.minus(value * 1);
    }

    addIfOdd = () => {
        const count = store.getState()
        const { value } = this.selectNum
        if (count % 2 !== 0)
            this.props.add(value * 1);
    }

    addAsync = () => {
        const count = store.getState()
        const { value } = this.selectNum
        // setTimeout(() => {
        this.props.addAsync(value * 1, 1000);
        // }, 1000)
    }

    render() {
        console.log(this.props.count);
        return (
            <div>
                <h1>Count组件</h1>
                <h4>Person组件人数为{this.props.personNum}</h4>
                <h3>当前求和为: {this.props.count}</h3>
                <select ref={c => this.selectNum = c} name="" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.add}>+</button>&nbsp;
                <button onClick={this.minus}>-</button>&nbsp;
                <button onClick={this.addIfOdd}>当前求和为奇数时, +</button>&nbsp;
                <button onClick={this.addAsync}>异步, +</button>&nbsp;
            </div>
        )
    }
}


// 创建并暴露一个Count的容器组件
// connect调用时要传入两个参数, 均为函数
// 一个函数返回redux中所保存的状态, 一个函数返回用于操作状态的方法
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
export default connect(
    state => ({ count: state.count, personNum: state.person.length }),
    // mapDispatchToProps的简写, 简写成对象,  react-redux自行调用dispatch, action中写的函数自行接收参数
    {
        add,
        minus,
        addAsync
    }
)(Count)


// 还原重写版
/* import React, { Component } from 'react';
import { connect } from 'react-redux'
import { createAddAction } from '../../redux/count_action'

class Count extends Component {
    add = () => {
        const { value } = this.selectNum
        this.props.add(value * 1)
    }
    render() {
        return (
            <div>
                <h2>当前求和为{this.props.sum}</h2>
                <select ref={c => this.selectNum = c} name="" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.add}>+</button>
            </div>
        );
    }
}

export default connect(
    // 映射状态
    state => ({ sum: state }),
    // 映射操作状态的方法
    {
        add: createAddAction
    }
)(Count); */
